<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,html{
				padding: 0;
				margin: 0;
				background:#0A0F23;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body style="background:none">
		<div id="container" style="height: 100%"></div>
		<script src="https://code.highcharts.com/highcharts.js"></script>
		<script src="https://code.highcharts.com/highcharts-3d.js"></script>
		<script src="https://code.highcharts.com/modules/exporting.js"></script>
		
		<script>
			var options = {
			    chart: {
			        renderTo: 'container',
			        backgroundColor: 'transparent',
			        marginTop :80,
			        marginLeft :0,
			        type: 'pie',
			        options3d: {
			            enabled: true,
			            alpha: 45,
			            beta: 0
			        }
			    },
			    title: {
			        text: '到访单位情况',
			        floating: true,
			        y:30,
			        style:{
			        	color: '#fff',
			        	fontSize: '22px',
			        	fontWeight: 'bold'
			        }
			    },
			    navigation: {
		            buttonOptions: {
		                enabled: false
		            }
		       },
			    tooltip: {
			        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
			    },
			    plotOptions: {
			        pie: {
			            allowPointSelect: true,
			            cursor: 'pointer',
			            depth: 28,
			            size: 280,
			            shadow: 'rgba(255,255,255,0.5)',
                        colors: ['#336c9c','#8ce8e7','#62cff1','#17d4ee','#4fac88','#59c293','#67c47b','#f86e89', '#ef7218', '#f5d650'],
			            dataLabels: {
			                enabled: true,
			                color: '#fff',
			                style:{
					        	color: '#fff',
					        	fontSize: '16px'
					        },
			                formatter: function () {
			                    return this.point.name +':'+ this.point.percentage.toFixed(2)+'%(' + this.point.y + ')';
			                }
			            }
			        }
			    },
			    series: [{
			        type: 'pie',
			        name: '浏览器占比',
			        slicedOffset: 30,
			        data: [
			            {name:'军工系统',y:27},
			            {name:'开发区',y:98},
			            {name: '其他',y: 158},
			            {name:'高校',y:53},
			            {name:'科技系统',y:311},
			            {name:'媒体',y:6},
			            {name:'社会团体',y:259},
			            {name: '科研院所',y: 41}
			        ]
			    }]
			}
			var chart = new Highcharts.Chart(options);
			var index = 1;
			var dataSeri = [
				{name:'军工系统',y:27},
			    {name:'开发区',y:98},
			    {name: '其他',y: 158},
			    {name:'高校',y:53},
			    {name:'科技系统',y:311},
			    {name:'媒体',y:6},
			    {name:'社会团体',y:259},
			    {name: '科研院所',y: 41}
			];
			setInterval(function () {
			    var id = index%9;
			    index = index + 1;
			    dataSeri[Math.max(id-1, 0)].sliced = false;
			    dataSeri[Math.max(id-1, 0)].selected = false;
			    dataSeri[id].sliced = true;
			    dataSeri[id].selected = true;
			    chart.series[0].setData(dataSeri);
			}, 1000);

		</script>
	</body>
</html>
